<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/echarts.min.js"></script>
    <script src="/js/china.js"></script>
    <style>
        html,body{
            height: 100%;
        }
    </style>
</head>
<body>
<div style="position: absolute;left: 40%;">
    <select id="time" style="width: 120px;height: 25px" >

    </select>
    <select id="con" style="width: 120px;height: 25px">
        <option value="0">确诊人数</option>
        <option value="1">治愈人数</option>
        <option value="2">死亡人数</option>
    </select>
    <button type="button" onclick="bing()">查询</button>
</div>

<!--创建一个容器-->
<div id="main" style="position: absolute;top:50px;width: 100%;height: 100%";></div>
</body>
</html>
<script>
    //定义jquery文档加载事件
    $(function(){
        //执行查询时间函数
        LoadTime();
    })
    //饼图 函数
    function bing(){
        //获取选中的查询时间
        var time = $("#time").val();
        //获取选中的查询条件
        var con = $("#con").val();
        //发送ajax请求
        $.ajax({
            url:"/info/bingAjax",
            type:"get",
            data:{"time":time,"con":con},
            dataType:"json",
            success:function(data){
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '统计新冠肺炎的各省治愈人数',
                        subtext: time,
                        left: 'center'
                    },
                    tooltip: {
                        triggerOn: "click",
                        formatter: function(e, t, n) {
                            return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.value
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 1000,
                        left: 26,
                        bottom: 40,
                        showLabel: !0,
                        text: ["高", "低"],
                        pieces: [{
                            gt: 100,
                            label: "> 100 人",
                            color: "#7f1100"
                        }, {
                            gte: 10,
                            lte: 100,
                            label: "10 - 100 人",
                            color: "#ff5428"
                        }, {
                            gte: 1,
                            lt: 10,
                            label: "1 - 9 人",
                            color: "#ff8c71"
                        }, {
                            gt: 0,
                            lt: 1,
                            label: "疑似",
                            color: "#ffd768"
                        }, {
                            value: 0,
                            color: "#ffffff"
                        }],
                        show: !0
                    },
                    geo: {
                        map: "china",
                        roam: !1,
                        scaleLimit: {
                            min: 1,
                            max: 2
                        },
                        zoom: 1.23,
                        top: 120,
                        label: {
                            normal: {
                                show: !0,
                                fontSize: "14",
                                color: "rgba(0,0,0,0.7)"
                            }
                        },
                        itemStyle: {
                            normal: {
                                //shadowBlur: 50,
                                //shadowColor: 'rgba(0, 0, 0, 0.2)',
                                borderColor: "rgba(0, 0, 0, 0.2)"
                            },
                            emphasis: {
                                areaColor: "#f2d5ad",
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                borderWidth: 0
                            }
                        }
                    },
                    series: [{
                        name: "确诊病例",
                        type: "map",
                        geoIndex: 0,
                        data: data.info
                    }]
                };
                //根据查询条件 修改图标的标题
                if (con==0){
                    option.title.text = "统计新冠肺炎的各省确诊人数";
                }else if (con==1)
                {
                    option.title.text = "统计新冠肺炎的各省治愈人数";
                }else
                {
                    option.title.text = "统计新冠肺炎的各省死亡人数";
                }
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        })
    }

    //查询时间
    function LoadTime(){
        //发送ajax请求
        $.ajax({
            url:"/info/time",
            type:"get",
            datatype:"json",
            success:function(data){
                //创建一个拼接字符串的变量
                var html="";
                //遍历服务端传来的集合数据，就是json数据
                for(var i=0;i<data.length;i++){
                    html+="<option value='"+data[i].time+"'>"+data[i].time+"</option>"
                }
                //把html加载到下拉框
                $("#time").html(html);
                //执行饼图函数
                bing();
            }
        })
    }
</script>